<template>
    <div>
        <el-card style="font-size: 16px"  v-if="questionDataList!=null" class="table-page">
            <template v-for="questionData in questionDataList">
                <div>
                    <p v-if="questionData.isHide" style="color: red">
                        【状态】隐藏
                    </p>
                    <p v-else style="color: green">【状态】公开</p>
                </div>
                <div>
                    【难度】{{ difficulty[questionData.difficulty] }}
                </div>
                <div>【题型】{{ questionStatus[questionData.firstType] }}</div>
                <div class="questionInfo">
                    【题干】
                    <div v-if="questionData.stem.length > 0">
                        <p v-for="(op,inx) in questionData.stem" :key="inx">
                            <img v-if="op.tp ==='img'"
                                 :src="'https://vipcdn.langrundata.com/'+op.vl"
                                 alt="" width="80"/>
                            <audio v-else-if="op.tp === 'audio'"
                                   :src="'https://vipcdn.langrundata.com/'+op.vl"
                                   controls="controls"></audio>
                            <span v-else v-html="op.vl">{{ op.vl }}</span>
                        </p>
                    </div>
                    <p v-else v-html="questionData.stem ? questionData.stem[0].vl : '-'"></p>
                </div>
                <div
                    v-if="questionStatus[questionData.firstType] === '单选题' ||questionStatus[questionData.firstType] === '多选题'"
                    class="qu-item">
                    <div
                        v-for="(item, index) in questionData.quOption"
                        :key="index"
                        class="questionInfo">
                        {{ item.option }}、
                        <div v-if="item.content.length > 0">
                            <p v-for="(op,inx) in item.content" :key="inx">
                                <img v-if="op.tp === 'img'"
                                     :src="'https://vipcdn.langrundata.com/'+op.vl"
                                     alt="" width="80"/>
                                <audio v-else-if="op.tp ==='audio'"
                                       :src="'https://vipcdn.langrundata.com/'+op.vl"
                                       controls="controls"></audio>
                                <span v-else v-html="op.vl">{{ op.vl }}</span>
                            </p>
                        </div>
                        <p v-else v-html="item.content ? item.content[0].vl : '-'"></p>
                    </div>
                </div>
                <div v-if="questionStatus[questionData.firstType] !== '组合题'">
                    <div class="questionInfo">
                        <div v-if="questionStatus[questionData.firstType] === '单选题'">
                            【正确答案】{{ questionData.answer ? questionData.answer : "--" }}
                        </div>
                        <div v-if="questionStatus[questionData.firstType] === '多选题'">
                            【正确答案】
                            <span v-if="questionData.answer === null">
                                            --
                                        </span>
                            <span v-for="(m,indexm) in questionData.answer" v-else :key="indexm">
                                            {{ m }}
                                        </span>
                        </div>
                        <div
                            v-if="questionStatus[questionData.firstType] === '填空题' || questionStatus[questionData.firstType] === '问答题'"
                            class="flexdiv">
                            【正确答案】
                            <span v-if="questionData.answer === undefined || questionData.answer === null">--</span>
                            <div v-for="(singleItem,indexVl) in questionData.answer" v-else :key="indexVl">
                                <p v-for="(fia,fin) in singleItem.vl " :key="fin">
                                    <img v-if="fia.tp === 'img'"
                                         :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                         alt="" width="80"/>
                                    <audio v-else-if="fia.tp ==='audio'"
                                           :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                           controls="controls"></audio>
                                    <span v-else v-html="fia.vl">{{ fia.vl }}</span>
                                </p>
                                <p v-if="indexVl !== questionData.answer.length-1">,</p>
                            </div>
                        </div>
                        <div v-if="questionStatus[questionData.firstType] === '判断题'">
                            【正确答案】<span>{{ questionData.answer === 1 ? "正确" : "错误" }}</span>
                        </div>
                    </div>
                    <div class="questionInfo">
                        <span>【试题解析】</span>
                        <div v-if="questionData.answerDesc.length > 0">
                            <p v-for="(op,inx) in questionData.answerDesc" :key="inx">
                                <img v-if="op.tp ==='img'"
                                     :src="'https://vipcdn.langrundata.com/'+op.vl"
                                     alt="" width="80"/>
                                <audio v-else-if="op.tp === 'audio'"
                                       :src="'https://vipcdn.langrundata.com/'+op.vl"
                                       controls="controls"></audio>
                                <span v-else v-html="op.vl">{{ op.vl }}</span>
                            </p>
                        </div>
                        <p v-else v-html="questionData.answerDesc.length!=0 ? questionData.answerDesc[0].vl : '-'"></p>
                    </div>
                </div>
                <div v-if="questionStatus[questionData.firstType] === '组合题'">
                    <div v-for="(item, index) in questionData.children" :key="index" style="display: flex">
                        <div>
                            <span>{{ index + 1 }})、</span>
                        </div>
                        <div>
                            <div>【题型】{{ questionStatus[item.firstType] }}</div>
                            <div>【难度】{{ difficulty[item.difficulty] }}</div>
                            <div class="questionInfo">
                                【题干】
                                <div v-if="item.stem.length > 0">
                                    <p v-for="(op,inx) in item.stem" :key="inx">
                                        <img v-if="op.tp === 'img'"
                                             :src="'https://vipcdn.langrundata.com/'+op.vl"
                                             alt="" width="80"/>
                                        <audio v-else-if="op.tp ==='audio'"
                                               :src="'https://vipcdn.langrundata.com/'+op.vl"
                                               controls="controls"></audio>
                                        <span v-else v-html="op.vl">{{ op.vl }}</span>
                                    </p>
                                </div>
                                <p v-else v-html="item.stem ? item.stem[0].vl : '-'"></p>
                            </div>
                            <div
                                v-if="questionStatus[item.firstType] === '单选题' || questionStatus[item.firstType] === '多选题'"
                                class="qu-item">
                                <div
                                    v-for="(item1, index1) in item.quOption"
                                    :key="index1"
                                    class="questionInfo">
                                    {{ item1.option }}、
                                    <div v-if="item1.content.length > 0">
                                        <p v-for="(op,inx) in item1.content" :key="inx">
                                            <img v-if="op.tp === 'img'"
                                                 :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                 alt="" width="80"/>
                                            <audio v-else-if="op.tp ==='audio'"
                                                   :src="'https://vipcdn.langrundata.com/'+op.vl"
                                                   controls="controls"></audio>
                                            <span v-else v-html="op.vl">{{ op.vl }}</span>
                                        </p>
                                    </div>
                                    <p v-else v-html="item1.content ? item1.content[0].vl : '-'"></p>
                                </div>
                            </div>
                            <div class="questionInfo">
                                <div v-if="questionStatus[item.firstType] === '单选题'">
                                    【正确答案】{{ item.answer ? item.answer : "--" }}
                                </div>
                                <div v-if="questionStatus[item.firstType] === '多选题'">
                                    【正确答案】
                                    <span v-if="item.answer === null">--</span>
                                    <span v-for="(m,indexm) in item.answer" v-else :key="indexm">{{ m }}</span>
                                </div>
                                <div class="qu-item"
                                     v-if="questionStatus[item.firstType] === '填空题' || questionStatus[item.firstType] === '问答题'">
                                    【正确答案】
                                    <span v-if="item.answer === null">--</span>
                                    <div v-for="(answerItem,indexa) in item.answer" v-else :key="indexa">
                                        <p v-for="(fia,fin) in answerItem.vl " :key="fin">
                                            <img v-if="fia.tp === 'img'"
                                                 :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                 alt="" width="80"/>
                                            <audio v-else-if="fia.tp ==='audio'"
                                                   :src="'https://vipcdn.langrundata.com/'+fia.vl"
                                                   controls="controls"></audio>
                                            <span v-else v-html="fia.vl">{{ fia.vl }}</span>
                                        </p>
                                        <p v-if="indexa !== item.answer.length-1">,</p>
                                    </div>
                                </div>
                                <div v-if="questionStatus[item.firstType] === '判断题'">
                                    【正确答案】<span>{{ item.answer === 1 ? "正确" : "错误" }}</span>
                                </div>
                            </div>
                            <div class="questionInfo">
                                <span>【试题解析】</span>
                                <div v-if="item.answerDesc.length > 0">
                                    <p v-for="(op,inx) in item.answerDesc" :key="inx">
                                        <img v-if="op.tp ==='img'"
                                             :src="'https://vipcdn.langrundata.com/'+op.vl"
                                             alt="" width="80"/>
                                        <audio v-else-if="op.tp === 'audio'"
                                               :src="'https://vipcdn.langrundata.com/'+op.vl"
                                               controls="controls"></audio>
                                        <span v-else v-html="op.vl">{{ op.vl }}</span>
                                    </p>
                                </div>
                                <p v-else v-html="item.answerDesc.length!=0 ? item.answerDesc[0].vl : '-'"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <el-button
                    class="editButton"
                    type="primary"
                    @click="canUpdate(questionData)"
                >修改
                </el-button>
                <br/><br/>
                <div
                    v-if="undefined!=questionSource.chapterList && null!=questionSource.chapterList && questionSource.chapterList.length>0">
                    章节:
                    <div v-for=" item in questionSource.chapterList">
                        {{ item.industryName }}--{{ item.examName }}--{{
                            item.categoryName.join("--")
                        }}--{{ item.chapterName.join("--") }}

                    </div>
                </div>

                <br/><br/>
                <div
                    v-if="undefined!=questionSource.paperList && null!=questionSource.paperList && questionSource.paperList.length>0">
                    试卷:
                    <div v-for=" item in questionSource.paperList">
                        {{ item.industryName }}--{{ item.examName }}--{{
                            item.categoryName.join("--")
                        }}--{{ item.paperName }}

                    </div>
                </div>
            </template>
        </el-card>

        <div class="table-page">
            <div class="table-operation-box">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    style="margin-bottom: 2em"
                    @click="batchLock(true)"
                    :disabled="selectDisable"
                >批量处理
                </el-button>
            </div>
            <div class="table-data-box">
                <el-table
                    ref="table"
                    v-loading="tableLoading"
                    border
                    :data="tableData"
                    style="width: 100%;min-height:40em"
                    row-key="id"
                    :highlight-current-row="true"
                    @selection-change="tableSelectionChange"

                >
                    <el-table-column
                        :selectable="correctionEnable"
                        type="selection"
                        min-width="55"
                        align="center"
                        :resizable="false"
                    >
                    </el-table-column>
                    <!--                    <el-table-column-->
                    <!--                        prop="questionId"-->
                    <!--                        label="试题id"-->
                    <!--                        width="150"-->
                    <!--                        align="center"-->
                    <!--                        :resizable="false"-->
                    <!--                    >-->
                    <!--                    </el-table-column>-->
                    <el-table-column
                        prop="type"
                        label="反馈类型"
                        width="100"
                        align="center"
                        :resizable="false"
                    >
                        <template slot-scope="scope">
                            {{ status[scope.row.type] }}
                        </template>
                    </el-table-column>
                    <el-table-column label="是否处理" prop="handle" width="100">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.handle" type="success"
                            >已处理
                            </el-tag
                            >
                            <el-tag v-if="!scope.row.handle" type="warning"
                            >未处理
                            </el-tag
                            >
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="content"
                        label="内容"
                        align="center"
                        width="450"
                        :resizable="false"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="description"
                        label="描述"
                        align="center"
                        width="450"
                        :resizable="false"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="createdTime"
                        label="创建日期"
                        align="center"
                        :resizable="false"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="createdBy"
                        label="创建人id"
                        align="center"
                        :resizable="false"
                    >
                    </el-table-column>
                    <el-table-column
                        prop="modifyBy"
                        label="最后操作者"
                        align="center"
                        :resizable="false"
                    >
                        <template slot-scope="scope">
                            <div>
                                <p>{{ scope.row.modifyBy }}</p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="200"
                        align="center"
                        fixed="right"
                        :resizable="false"
                    >
                        <template slot-scope="scope">

                            <el-button
                                v-if="!scope.row.handle"
                                class="primary"
                                type="text"
                                icon="el-icon-edit"
                                size="mini"
                                :loading="scope.row.opLoading"
                                @click="handle(scope.row.id)"
                            >处理
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="pageData.total" class="xy-between table-page-box">
                <el-pagination
                    :current-page.sync="pageData.currentPage"
                    :page-sizes="pageData.pageSizes"
                    :page-size.sync="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageData.total"

                >
                </el-pagination>
            </div>
            <!-- 试题弹出框 -->
            <add-question-box
                ref="addDialog"
                :question-type="addQuestionType"
                :q-type-array="qTypeNameArray"
                :edit-question-text="editQuestionText"
                @edit-qu-list="submitEditQuestion"
            ></add-question-box>
            <el-dialog title="添加描述" @closed="closeDescribe" :visible.sync="descFormVisible" width="40%">
                <el-form :model="correctionData">
                    <el-form-item label="描述">
                        <el-input type="textarea" v-model="correctionData.desc"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="descFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit(true)">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>


</template>

<script>

import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {get, post, put, request} from "@/api/request";
import {editQuestion, fetchQuestionType} from "@/api/exam";
import AddQuestionBox from "@/views/models/exam/questionBase/question/components/AddQuestionBox";

export default {
    name: "QuestionCorrectionDetails",
    components: {AddQuestionBox},
    mixins: [TablePage],
    data() {
        return {
            handleOptions: [{
                value: true,
                label: "已处理"
            }, {
                value: false,
                label: "未处理"
            }],
            options: [
                {
                    value: "answer",
                    label: "答案有问题"
                },
                {
                    value: "inconsistent",
                    label: "答案与解析不相符"
                },
                {
                    value: "typo",
                    label: "有错别字"
                },
                {
                    value: "option",
                    label: "选项有问题"
                },
                {
                    value: "other",
                    label: "其他"
                }
            ],
            queryData: {
                pageSize: 10,
                currentPage: 1,
                questionId: "",
            },
            questionSource: {},
            descFormVisible: false,
            correctedTitle: "添加描述",
            correctionData: {
                id: null,
                desc: null
            },
            tableData: [],
            questionDataList: null,
            ids: [],
            initAddForm: {
                id: null,
                name: null,
                remark: null,
                firstType: null
            },
            multipleSelection: [],
            addQuestionType: null,
            qTypeNameArray: [],
            editQuestionText: "编辑单选题",
            questionListForm: []
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.correctionType,
            questionStatus: state => state.status.questionFirstType,
            difficulty: state => state.status.questionDifficulty
        })
    },
    watch: {
        actionsearchCorrection(val) {
            this.$refs.tree.filter(val);
        },
        "pageData.currentPage"(currentPage) {
            this.searchCorrection();
        },
        "pageData.pageSize"(pageSize) {
            if (pageSize === 99999999) {
                return;
            }
            if (this.pageData.currentPage === 1) {
                this.searchCorrection();
            } else {
                this.pageData.currentPage = 1;
            }
        }
    },
    async created() {
        this.questionId = this.$route.query.questionId;
        let res = await this.getQuestionInfo(this.questionId);
        if (res === null) {
            this.$message({
                message: "试题不存在",
                type: "error",

            });
            this.closeThisTag()
            this.$router.go(-1)
        }
        this.questionDataList = res;
        this.questionSource = await this.getQuestionSource(this.questionId);

        this.queryData.questionId = this.questionId;
        this.searchCorrection(this.queryData)
    },
    methods: {
        statusEdit(url, data) {
            put(url, data)
                .then(res => {
                    this.searchCorrection();
                })
        },
        correctionEnable(row, rowIndex) {
            if (!row.handle) {
                return true;
            }
            return false;
        },
        handle(id) {
            this.correctionData.id = [id]
            this.descFormVisible = true;
        },
        async getQuestionInfo(questionId) {
            let res = await get("/exam/question/question-info-list", {id: questionId});
            return res;
        },
        async getQuestionSource(questionId) {
            return await get("/exam/question/question-source", {id: questionId})

        },
        async batchLock(id, status) {
            if (status) {
                await this.$confirm("确定处理这些吗？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "success"
                });
            }
            this.correctionData.id = this.tableSelect
            this.descFormVisible = true;
        },
        submit(status) {
            put(`/exam/correction/batch-sign`, {ids: this.correctionData.id, status, desc: this.correctionData.desc})
                .then(res => {
                    this.searchCorrection(this.queryData);
                    this.descFormVisible = false;
                })


        },
        searchCorrection(queryData) {
            this.loadTable("/exam/correction/page", queryData);
        },
        closeDescribe() {
            this.correctionData.desc = "";

        },
        filterAction(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        submitEditQuestion(qForm) {

            this.editQuListDialog = false;
            let answer = "";
            let qtypeMap = {"1": "单选题", "2": "多选题", "3": "判断题", "4": "填空题", "5": "问答题", "6": "复合题"};
            let qtMap = {
                "1": "singleChoice",
                "2": "multipleChoice",
                "3": "judgment",
                "4": "fill",
                "5": "text",
                "6": "combination"
            };
            let dataForm = {
                qType: qtypeMap[this.addQuestionType],
                score: qForm.score,
                stem: qForm.mainStem,
                answerDesc: qForm.desc,
                isShow: false,
                typeId: qForm.typeId,
                diff: qForm.diffVl,
                answer: qForm.answer,
            };
            if (this.addQuestionType === 1 || this.addQuestionType === 2) {
                let multAnswer = [];
                dataForm.options = qForm.heOptions.map(v => {
                    if (v.isAnswer) {
                        if (answer !== "") {
                            answer += ","
                        }
                        answer += v.name
                        multAnswer.push(v.name);
                    }
                    let htmlObj = {
                        tp: "html",
                        vl: v.value
                    }
                    return {
                        option: v.name,
                        content: [htmlObj]
                    };
                });
                if (this.addQuestionType === 2) {
                    dataForm.answer = multAnswer;
                } else {
                    dataForm.answer = answer;
                }
            }
            if (this.addQuestionType === 3) {
                let htmlObj = {
                    tp: "html",
                    vl: "正确"
                }
                let wrongObj = {
                    tp: "html",
                    vl: "错误"
                }
                dataForm.options = [{option: 1, content: [htmlObj]}, {option: 0, content: [wrongObj]}];
            }
            if (this.addQuestionType === 4) {
                let fillAnswer = [];
                dataForm.options = qForm.fillOptions.map(v => {
                    let fData = {pt: [], vl: [{tp: "text", vl: v.value,}]}
                    fillAnswer.push(fData)
                    return {tp: ["text"]}
                });
                dataForm.answer = fillAnswer;
            }
            // 问答题
            if (this.addQuestionType === 5) {
                dataForm.options = [{tp: ["html"]}];
                let answerObjet = {
                    tp: "html",
                    vl: qForm.answer
                }
                dataForm.answer = [{pt: [], vl: [answerObjet]}];
            }
            // 封装model
            let quData = {
                firstType: qtMap[this.addQuestionType],
                knowledgePoint: "",
                difficulty: qForm.diffVl,
                sourceType: qForm.sourceType,
                knowledgeLevel: 5,
                isHide: false,
                id: qForm.id,
                score: dataForm.score,
                sourceId: qForm.sourceId,
                categoryId: qForm.categoryId
            }
            let stemHtmlObjet = {
                tp: "html",
                vl: dataForm.stem
            }
            let decsHtmlObjet = {
                tp: "html",
                vl: dataForm.answerDesc
            }
            if (this.addQuestionType !== 6) {
                quData.quOption = dataForm.options;
                quData.answer = dataForm.answer;
                quData.answerDesc = [decsHtmlObjet];
            }
            quData.stem = [stemHtmlObjet];
            quData.typeId = dataForm.typeId;
            editQuestion(quData).then(async res => {
                if (res) {
                    this.$message({
                        message: "恭喜你，修改试题成功",
                        type: "success"
                    });
                    this.questionDataList = await this.getQuestionInfo(this.questionId);
                    console.log("修改", this.getQuestionInfo(this.questionId))
                } else {
                    this.$message.error("错了哦，修改试题失败");
                }
            });
        },
        canUpdate(data) {

            let qtMap = {"singleChoice": 1, "multipleChoice": 2, "judgment": 3, "fill": 4, "text": 5, "combination": 6};
            let qtypeMap = {1: "单选题", 2: "多选题", 3: "判断题", 4: "填空题", 5: "问答题", 6: "复合题"};
            this.addQuestionType = qtMap[data.firstType];
            this.editQuestionText = "编辑" + qtypeMap[this.addQuestionType];
            let ds = "";
            if (this.addQuestionType !== 6) {
                if (data.answerDesc !== null) {
                    ds = this.getPublicMap(data.answerDesc)
                }
                let answer = "";
                if (this.addQuestionType === 1 || this.addQuestionType === 2) {
                    let dataOptions = data.quOption;
                    let quData = [];
                    dataOptions.map(v => {
                        let dd = {};
                        dd.name = v.option;
                        let opContent = "";
                        if (v.content.length > 0) {
                            opContent = this.getPublicMap(v.content);
                        }
                        dd.value = opContent;
                        dd.isQuill = /<[^>]*>/.test(dd.value);
                        dd.isAnswer = false;
                        if (this.addQuestionType === 2 && data.answer instanceof Array) {
                            let dAnswer = "";
                            data.answer.map(q => {
                                if (v.option === q) {
                                    dd.isAnswer = true;
                                    dAnswer += q;
                                }
                            })
                            answer = dAnswer;
                        }
                        if (this.addQuestionType === 1) {
                            if (v.option === data.answer) {
                                dd.isAnswer = true;
                            }
                        }
                        quData.push(dd)
                    })
                    this.questionListForm.heOptions = quData;
                }
                if (this.addQuestionType === 3) {
                    let htmlObj = {
                        tp: "text",
                        vl: "正确"
                    }
                    let wrongObj = {
                        tp: "text",
                        vl: "错误"
                    }
                    this.questionListForm.heOptions = [{option: 1, content: [htmlObj]}, {
                        option: 0,
                        content: [wrongObj]
                    }];
                    answer = data.answer;
                }
                if (this.addQuestionType === 4) {
                    let quData = [];
                    let qa = data.answer;
                    let fillAnswer = "";

                    qa.map(v => {
                        let da = {
                            name: "",
                            value: "",
                            isQuill: false
                        };
                        let fillContent = "";
                        if (v.vl.length > 0) {
                            fillContent = this.getPublicMap(v.vl);
                            da.name = fillContent;
                            da.value = fillContent;
                            da.isQuill = /<[^>]*>/.test(da.value);
                        }
                        quData.push(da)
                        fillAnswer += da.value;
                    });
                    answer = fillAnswer;
                    this.questionListForm.fillOptions = quData;
                }
                if (this.addQuestionType === 5) {
                    let quTextContent = "";
                    if (data.answer !== null && data.answer instanceof Array) {
                        data.answer.map(as => {
                            quTextContent += this.getPublicMap(as.vl)
                        });
                    }
                    answer = quTextContent;
                }
                this.questionListForm.answer = answer;
                this.questionListForm.desc = ds;
            }
            // 处理题干
            let stemContent = "";
            if (data.stem !== null) {
                stemContent = this.getPublicMap(data.stem)
            }
            this.questionListForm.mainStem = stemContent;
            this.questionListForm.diffVl = data.difficulty
            this.questionListForm.id = data.id;
            this.questionListForm.score = data.score;
            this.questionListForm.typeId = data.typeId;
            this.questionListForm.sourceId = data.sourceId;
            this.questionListForm.sourceType = data.sourceType;
            this.questionListForm.categoryId = data.categoryId;
            this.findQType(this.addQuestionType);
            this.$refs.addDialog.openDialog(this.questionListForm, true)
        },
        getPublicMap(mapValue) {
            let content = "";
            mapValue.map(st => {
                if (st.tp === "img") {
                    let srcStr = "https://vipcdn.langrundata.com/" + st.vl;
                    content += "<img src=\"" + srcStr + "\" />"
                } else if (st.tp === "audio") {
                    let srcStr = "https://vipcdn.langrundata.com/" + st.vl;
                    content += "<audio src=\"" + srcStr + "\" controls='controls'/>"
                } else {
                    content += st.vl;
                }
            })
            return content
        },
        findQType(vl) {
            let qtMap = {
                "1": "singleChoice",
                "2": "multipleChoice",
                "3": "judgment",
                "4": "fill",
                "5": "text",
                "6": "combination"
            };
            fetchQuestionType({firstType: qtMap[vl]}).then(res => {
                if (res) {
                    this.qTypeNameArray = res;
                }
            })
        },
    }
};
</script>

<style lang="scss" scoped>
.search-item {
    label {
        margin-left: 1em;
    }
}

.questionInfo {
    display: flex;
}

.questionInfo ::v-deep p {
    img {
        width: 100px;
    }

}

.editButton {
    margin-top: 20px;
}

.qu-item {
    margin-left: 8px;
}
</style>
